<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cat</title>
    <script type="text/javascript" src="./echarts.js"></script>
    <script type="text/javascript" src="./echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 500px"></div>
<script>
    onload = function () {
        var data = {
            image: ""
        }
        var myChart = echarts.init(document.getElementById('main'));
        var maskImage = new Image();
        maskImage.src = data.image

        maskImage.onload = function () {
            myChart.setOption({
                backgroundColor: '#fff',
                tooltip: {
                    show: false
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 1,
                    sizeRange: [12, 55],
                    rotationRange: [-45, 0, 45, 90],
                    maskImage: maskImage,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' +
                                    Math.round(Math.random() * 255) +
                                    ', ' + Math.round(Math.random() * 255) +
                                    ', ' + Math.round(Math.random() * 255) + ')'
                            }
                        }
                    },
                    left: 'center',
                    top: 'center',
                    right: null,
                    bottom: null,
                    data: data.value
                }]
            })
        }

    }
</script>
</body>
</html>

